import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Upload,
  message,
} from 'antd';

import styles from './ImageDisplayer.less';

export default class ImageDisplayer extends React.Component {
  state = {
    previewVisible: false,
    index: 0,
    fileList: [],
  };

  componentDidMount() {
    // this.setState({index: this.props.index, fileList: this.props.fileList})
  }

  handleClickPreview = () => {
    this.setState({
      previewVisible: true,
    });
  };

  handleClickDelete = () => {
    // message.warn('您点击了删除');
    this.props.onDelete && this.props.onDelete(this.props.file);
  };

  handleCancel = () => {
    this.setState({ previewVisible: false });
  };

  handleNextPage = () => {
    if (this.state.index < this.props.fileList.length - 1) {
      this.setState({
        index: this.state.index + 1,
      });
    } else {
      message.warning('已经最后一张了');
    }
  };

  handleOnePiece = () => {
    if (this.state.index > 0) {
      this.setState({
        index: this.state.index - 1,
      });
    } else {
      message.warning('已经第一张了');
    }
  };

  render() {
    const { previewVisible } = this.state;

    let src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
    // let fileList = [];
    // if(this.props.fileList){
    //   fileList = this.props.fileList;
    // }
    // console.log("index",this.props.index)
    // console.log("this.props.fileList;",this.props.fileList)
    if (this.props.src) {
      src = this.props.src;
    } else if (this.props.file) {
      src = this.props.file.url;
    }

    return (
      <div className={styles.imageContainer}>
        <div className={styles.imageBox}>
          <div className={styles.imageFile}>
            <div />
            <img src={src} />
            <div />
          </div>

          <div className={styles.imageActions}>
            <Icon size="large" type="eye-o" onClick={this.handleClickPreview} />
            {this.props.showDeleteIcon && (
              <Icon
                style={{ left: '30px' }}
                size="large"
                type="delete"
                onClick={this.handleClickDelete}
              />
            )}
          </div>
        </div>
        {/* fileList.length>0?fileList[index] */}
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} width={'800px'}>
          <img className={styles.imageInModal} style={{ width: '100%' }} src={src} />
          {/* <div style={{ textAlign: 'center' }}>
            <Button onClick={this.handleOnePiece} style={{ marginRight: '10px' }}>上一张</Button>
            <Button onClick={this.handleNextPage} style={{ marginLeft: '10px' }}>下一张</Button>
          </div> */}
        </Modal>
      </div>
    );
  }
}
